<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <meta name="Author" content="Estelle">
    <meta name="Keywords" content="李玥仪的个性简历">

    <title>李玥仪的简历</title>

    <link rel="stylesheet" type="text/css" href="css.css">

    <script type="text/javascript">

        window.onload = function () {
            var slide = document.getElementById('slide');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var len = 3;
            var animated = false;
            var interval = 3000;
            var timer;


            function animate (offset) {
                if (offset == 0) {
                    return;
                }
                animated = true;
                var time = 300;
                var inteval = 10;
                var speed = offset/(time/inteval);
                var left = parseInt(list.style.left) + offset;

                var go = function (){
                    if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px';
                        setTimeout(go, inteval);
                    }
                    else {
                        list.style.left = left + 'px';
                        if(left>-200){
                            list.style.left = -500 * len + 'px';
                        }
                        if(left<(-500 * len)) {
                            list.style.left = '-500px';
                        }
                        animated = false;
                    }
                }
                go();
            }

            function showButton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }

            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 3) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-500);
                showButton();
            }
            prev.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 1) {
                    index = 3;
                }
                else {
                    index -= 1;
                }
                animate(500);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == 'on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -500 * (myIndex - index);

                    animate(offset);
                    index = myIndex;
                    showButton();
                }
            }

            slide.onmouseover = stop;
            slide.onmouseout = play;

            play();

        }
    </script>
</head>

<body>
	<!--整体外层容器-->
	<div id="container">
	    <!--页头-->
		<div id="pageHeader">
			<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Estelle's Personal Resume</h1>
			<h2>&nbsp;&nbsp;&nbsp;FOR HCI</h2>
		</div>
		
		<!--全局导航条-->
		<div id="globallink">
			<ul>
                <li><a href="#personalInformation" name="back1"><b>个人信息</b></a></li>
                <li><a href="#Skills" name="back2"><b>个人技能</b></a></li>
                <li><a href="#pojectExperiences" name="back3"><b>项目经验</b></a></li>
                <li><a href="#self-evaluation" name="back4"><b>自我评价</b></a></li>
                <li><a href="#aboutTheFrontEnd" name="back5"><b>关于前端</b></a></li>
                <li><a href="#aboutHCI" name="back6"><b>关于HCI</b></a></li>
                <li><a href="#instruction" name="back7"><b>简历说明</b></a></li>
			</ul>
		</div>
		
		<!--轮播图-->
		<div id="slide">
		    <!--3张图片-->
			<div id="list" style="left: -500px;">
                <img src="images/333.jpg" alt="1"/>
                <img src="images/111.jpg" alt="1"/>
                <img src="images/222.jpg" alt="2"/>
                <img src="images/333.jpg" alt="3"/>
                <img src="images/111.jpg" alt="3"/>
            </div>
            <!--3个按钮-->
            <div id="buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
            </div>
            <!--左右箭头-->
            <a href="javascript:;" id="prev" class="arrow">&lt;</a>
            <a href="javascript:;" id="next" class="arrow">&gt;</a>
		</div>
        
        <!--个人信息-->
        <div id="personalInformation">
        	<h3><a name="personalInformation" href="#back1">个人信息</a></h3>
        	<ul>
        	    <li><p>中文名：李玥仪</p></li>
        		<li><p>英文名：Estelle</p></li>
        		<li><p>性别：女</p></li>
        		<li><p>民族：汉族</p></li>
        		<li><p>星座：狮子座</p></li>
        		<li><p>血型：O型</p></li>
        		<li><p>身高：161cm</p></li>
        		<li><p>体重：**kg</p></li>
                <li><p>出生地：广东茂名</p></li>
                <li><p>出生日期：1997.07.25</p></li>
                <li><p>年级专业班级：15级信息管理与信息系统5班</p></li>
                <li><p>联系电话：13430378426/688426</p></li>
                <li><p>通信地址：华南农业大学泰山区学生宿舍8栋709</p></li>
                <li><p>邮箱：estellebigbang@163.com</p></li>
        	</ul>
        </div>

         <!--个人技能-->
        <div id="Skills">
            <h3><a name="Skills" href="#back2">个人技能</a></h3>
            <p><b>HTML</b></p>
            <div id="n1"></div><div id="n2"></div>
            <p><b>CSS</b></p>
            <div id="n3"></div><div id="n4"></div>
            <p><b>JS</b></p>
            <div id="n5"></div><div id="n6"></div>
            <p><b>CSS3</b>
            <div id="n7"></div><div id="n8"></div>
            <p><b>HTML5</b></p>
            <div id="n9"></div><div id="n10"></div>
            <p><b>PS</b></p>
            <div id="n11"></div><div id="n12"></div>
            </div>

        <!--项目经验-->
        <div id="pojectExperiences">
            <h3><a name="pojectExperiences" href="#back3">项目经验</a></h3>
            <p>【Java课程设计】图书馆占位管理系统 负责：界面设计和实现，报告<br/>
            <b><a href="picture.html" target="_blank">more about this>></a></b>
            </p>	
        </div>

        <!--关于前端-->
        <div id="aboutTheFrontEnd">
            <h3><a name="aboutTheFrontEnd" href="#back5">关于前端</a></h3>
            <p>
            我为什么选择前端，其实最开始确实是因为想进入工作室而抱有的侥幸心理——前端入门简单。但是这并不代表我不欣赏、不喜欢前端。因为从我在JAVA课设中选择任务也可以看出我 对界面的设计和实现是有偏爱的。
            虽然我学习前端才只有不到一个月的时间,但当我用笨拙的技术制作出自己第一个界面的时候，我就知道，我会对前端有着不竭的兴趣。<br/>
            我的前端学习之路还有很长，但我相信我会一直保持初心和对前端的敬畏之心钻研下去！
            </p>	
        </div>


         <!--自我评价-->
        <div id="self-evaluation">
            <h3><a name="self-evaluation" href="#back4">自我评价</a></h3>
            <p>有良好的创新思维和沟通能力，有较好的审美水平，对色彩、构图等元素触觉敏锐；<br/>有较强的创造力和学习能力，能很快的接受新鲜事物；<br/>
            有高度的责任心，保证工作质量；<br/>兴趣爱好广泛，喜欢结识朋友，注重团队精神</p>	
        </div>

        <!--简历说明-->
        <div id="instruction">
        	<h3><a name="instruction" href="#back7">简历说明</a></h3>
        	<ol>
        	    <li><p>因为是“个性简历”，我并没有刻意地去模仿常见的网页版简历模板，而是照着自己原有的想法，尽可能地用上自己已经学习和掌握了的标签和设计，如导航栏,来完成个性简历的设计。<br/>
        		同时为了更好地完成任务，我放弃了原有的学习进度（还没有开始学习JS），通过慕课网单独学习了轮播图的做法。</p></li>
        		<li><p>因为以我现在掌握的知识无法完成其他特效，所以我决定在界面的排版和配色下更多的功夫，同时配合PS完成导航栏和分栏标题的细节设计。</p></li>
        		<li><p>这次任务最大的遗憾是，我在制作页面的过程中缺乏了整体布局的思想，过分迁就轮播图和导航栏的位置而对所有的布局采用“px"而不是百分比布局，对不同浏览器、不同电脑屏幕的适配性很差。对于“死布局”，在不同电脑上的显示效果无法保证。</p></li>
        	</ol>
        </div>

        <!--关于HCI-->
        <div id="aboutHCI">
            <h3><a name="aboutHCI" href="#back6">关于HCI</a></h3>
            <p>进入工作室，是我给自己大二定下的目标。<br/><br/>
            我知道在信管专业中，如果将技术和管理完全的隔离对自己未来的就职是没有任何好处。
            所以，我必须要在大二一年弥补大一的空白，增强自己在技术方面的实力。我了解到工作室对于想走技术的人的帮助会很大，除了有激励学习的作用，
            更多是能让我积累经验，还能接触到更多的志同道合的伙伴，共同学习进步。<br/><br/>
            至于为什么选择HCI，可能是因为一见钟情吧。暂时没有面试其他工作室的想法。
        </p>	
        </div>
        

        <div id="footer">
        	<h2>更多作品希望与你们共同完成</h2>
        	<h2>我是李玥仪，期待您的肯定与回复&nbsp;&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;&nbsp;<a href="form.html" target="_blank">给我留言</a></h2>
        </div>

	</div>
</body